<template>
  <div>
    <div style="height: 40px"><h1>服务审核</h1></div>
    <div style="width: 100%">
      <div class="shaixuan_1">&nbsp;
        <i class="iconfont icon-shaixuan"></i>
        <span slot="title">筛选</span>
      </div>
      <div class="shaixuan_2">
        <div id="text">
          <font></font>
        </div>
        <div id="input">
          <el-input v-model="doctor.name"
                    placeholder="请输入医生姓名"></el-input>
        </div>
        <div id="date">
          <el-dropdown style="margin-right: 70px"
                       @command="departmentMethod">
            <el-button type="primary">
              {{ department }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item,i) in departments"
                                :key="i"
                                :command="item">{{item}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-dropdown @command="postMethod">
            <el-button type="primary">
              {{ post }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item,i) in posts"
                                :key="i"
                                :command="item">{{ item }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <div id="button">
          <el-button type="primary"
                     @click="doctorFilter">筛选</el-button>
        </div>

      </div>
    </div>
    <div>
      <div class="shaixuan_1">&nbsp;
        <i class="iconfont icon-querylist"></i>
        <span slot="title">医生列表</span>
      </div>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
                         label="选择"
                         width="50"
                         align="center">
          <input type="checkbox">
        </el-table-column>
        <el-table-column
          prop="id"
          label="ID"
          width="60">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column prop="phone"
                         label="电话"
                         width="150">
        </el-table-column>
        <el-table-column
          prop="hospitalName"
          label="医院"
          width="150">
        </el-table-column>
        <el-table-column
          prop="depTmName"
          label="科室"
          width="170">
        </el-table-column>
        <el-table-column
          prop="positionName"
          label="职务"
          width="70">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="入职时间"
          width="120">
        </el-table-column>
        <el-table-column
          prop="approvalStatus"
          label="审核状态"
          width="60">
        </el-table-column>
        <el-table-column
          prop="serverExamining"
          label="服务审核"
          width="60">
        </el-table-column>
        <el-table-column fixed="right"
                         label="操作"
                         width="200">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small" style="background-color: #00d4ff; color: #ebebeb">查看</el-button>
            <el-button @click="handleEdit(scope.$index,scope.row)" type="text" size="small" style="background-color: #0040ff; color: #ebebeb">审核</el-button>
            <el-button @click="delDoctor(scope.$index,scope.row)" type="text" size="small" style="background-color: red; color: #ebebeb">删除</el-button>
            <!-- 编辑时候的弹出层 -->
            <el-dialog title="服务审核"
                       :visible.sync="dialogFormVisible"
                       width="600px"
                       top="20px"
                       :append-to-body="true">
              <div>
                <h3>服务名称 图文问诊</h3>
              </div>
              <div style="margin-bottom: 10px">
                审核
                <el-radio v-model="serviceAuditTemp.GraphicConsultationOK" label="审核通过">审核通过</el-radio>
                <el-radio v-model="serviceAuditTemp.GraphicConsultationNO" label="审核不通过">审核不通过</el-radio>
              </div>
              <div style=" margin-bottom: 10px">
                <el-input
                    type="textarea"
                    :rows="4"
                    placeholder="备注"
                    v-model="serviceAuditTemp.GraphicConsultationRemarks" style="float: right">
                </el-input>
              </div>

              <div>
                <h3>服务名称 电话问诊</h3>
              </div>
              <br>
              <div style="margin-bottom: 10px">
                审核
                <el-radio v-model="serviceAuditTemp.TelephoneConsultationOK" label="审核通过">审核通过</el-radio>
                <el-radio v-model="serviceAuditTemp.TelephoneConsultationNO" label="审核不通过">审核不通过</el-radio>
              </div>
              <div style=" margin-bottom: 10px">
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="备注"
                  v-model="serviceAuditTemp.TelephoneConsultationRemarks" style="float: right">
                </el-input>
              </div>
              <div>
                <h3>服务名称 视频问诊</h3>
              </div>
              <br>
              <div style="margin-bottom: 10px">
                审核
                <el-radio v-model="serviceAuditTemp.VideoConsultationOk" label="审核通过">审核通过</el-radio>
                <el-radio v-model="serviceAuditTemp.VideoConsultationNO" label="审核不通过">审核不通过</el-radio>
              </div>
              <div style=" margin-bottom: 10px">
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="备注"
                  v-model="serviceAuditTemp.VideoConsultationRemarks" style="float: right">
                </el-input>
              </div>
              <div>
                <h3>服务名称 挂号预约</h3>
              </div>
              <br>
              <div style="margin-bottom: 10px">
                审核
                <el-radio v-model="serviceAuditTemp.RegisterConsultationOK" label="审核通过">审核通过</el-radio>
                <el-radio v-model="serviceAuditTemp.RegisterConsultationNO" label="审核不通过">审核不通过</el-radio>
              </div>
              <div style=" margin-bottom: 10px">
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="备注"
                  v-model="serviceAuditTemp.RegisterConsultationRemarks" style="float: right">
                </el-input>
              </div>
              <div>
                <h3>服务名称 复诊开药</h3>
              </div>
              <br>
              <div style="margin-bottom: 10px">
                审核
                <el-radio v-model="serviceAuditTemp.FollowUpOK" label="审核通过">审核通过</el-radio>
                <el-radio v-model="serviceAuditTemp.FollowUpNO" label="审核不通过">审核不通过</el-radio>
              </div>
              <div style=" margin-bottom: 10px">
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="备注"
                  v-model="serviceAuditTemp.FollowUpRemarks" style="float: right">
                </el-input>
              </div>

              <div slot="footer"
                   class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary"
                           @click="handleSet(scope.$index, scope.row)">确 定</el-button>
              </div>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>

      <div id="all"><input type="checkbox" id="checkall">全选</div>
      <el-button type="danger" id="delall" size="mini">批量删除</el-button>
      <div id="page"><el-pagination background
                       @current-change="handleCurrentChange"
                       :page-size="pageSize"
                       layout="total, prev, pager, next"
                       :total="total">
        </el-pagination></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ServiceAudit',
  data() {
    return {

      val: 0,
      dialogFormVisible: false, //弹出层默认为关闭
      //弹出层中的表单
      doctor: {
        // 搜索条件医生名
        name: "",
        depTmName: "",
        positionName: ""
      },

      serviceAudit: '',

      serviceAuditTemp: {
        id: '',
        GraphicConsultationOK: '',
        GraphicConsultationNO: '',
        GraphicConsultationRemarks: '',

        TelephoneConsultationOK: '',
        TelephoneConsultationNO: '',
        TelephoneConsultationRemarks: '',

        VideoConsultationOk: '',
        VideoConsultationNO: '',
        VideoConsultationRemarks: '',

        RegisterConsultationOK: '',
        RegisterConsultationNO: '',
        RegisterConsultationRemarks: '',

        FollowUpOK: '',
        FollowUpNO: '',
        FollowUpRemarks: '',
      },

      formLabelWidth: '50px',

      departments: ['请选择科室', '内科', '分泌科', '消化科', '儿科', '中医科'],
      department: '请选择科室',
      posts: [
        '请选择职务',
        '主任医师',
        '副主任医师',
        '主治医师',
        '住院医师',
        '药剂师',
        '护师',
      ],
      post: '请选择职务',
      tableData: [],

      filterStatus: false,

      total: 0,

      pageSize: 10
    }
  },
  methods: {
    //职务选择
    departmentMethod(department_name){
      this.department = department_name;
    },
    //科室选择
    postMethod(post_name){
      this.post = post_name;
    },
    //筛选
    doctorFilter(cur, len){
      if (this.department !== "请选择科室") {
        this.doctor.depTmName = this.department;
      }else {
        this.doctor.depTmName = '';
      }
      if (this.post !== "请选择职务") {
        this.doctor.positionName = this.post;
      }else {
        this.doctor.positionName = '';
      }
      this.filterStatus = true;

      this.$axios({
        method: 'GET',
        url: '/doctor/getAll/filter',
        params: {
          name: this.doctor.name,
          depTmName: this.doctor.depTmName,
          positionName: this.doctor.positionName,
          current: this.val,
          size: 10
        }
      }).then((data) => {
        this.tableData = data.data.data.records;
        this.total = data.data.data.total
      })
    },
    //医生详情
    handleClick(obj){
      this.$router.push({name:'DoctorInfo',params:{
        doctor: obj
        }})
    },
    //审核展示
    handleEdit (index, row) {
      this.dialogFormVisible = true //开启弹出层
      //对弹出层中的表单赋值
        this.serviceAuditTemp.id = '',
        this.serviceAuditTemp.GraphicConsultationOK = '',
        this.serviceAuditTemp.GraphicConsultationNO = '',
        this.serviceAuditTemp.GraphicConsultationRemarks ='',

        this.serviceAuditTemp.TelephoneConsultationOK = '',
        this.serviceAuditTemp.TelephoneConsultationNO = '',
        this.serviceAuditTemp.TelephoneConsultationRemarks ='',

        this.serviceAuditTemp.VideoConsultationOk = '',
        this.serviceAuditTemp.VideoConsultationNO = '',
        this.serviceAuditTemp.VideoConsultationRemarks ='',

        this.serviceAuditTemp.RegisterConsultationOK = '',
        this.serviceAuditTemp.RegisterConsultationNO = '',
        this.serviceAuditTemp.RegisterConsultationRemarks ='',

        this.serviceAuditTemp.FollowUpOK = '',
        this.serviceAuditTemp.FollowUpNO = '',
        this.serviceAuditTemp.FollowUpRemarks = ''

    },
    //医生删除
    delDoctor (index, row) {
      this.$confirm('此操作将永久删除该信息, 是否删除', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index,1);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //审核确定
    handleSet (index, row) {

      this.dialogFormVisible = false;
      this.serviceAudit = this.serviceAuditTemp;
      this.serviceAudit.id = row.id;

    },
    //获取所有数据
    getDoctorServer(cur, len){
      this.$axios({
        method: 'GET',
        url: '/doctor/getAll',
        params: {
          current: cur,
          size: len
        }
      }).then((data) => {
       this.tableData = data.data.data.records;
       this.total = data.data.data.total;
      })
    },
    //分页查询操作，要判断是否筛选过
    handleCurrentChange(val) {
      if (this.filterStatus) {
        this.doctorFilter(val, 1);
        return
      }
      this.getDoctorServer(val, 10);
    }
  },
  //加载页面后获取所有
  created() {
    this.getDoctorServer(1,10);
  }
}
</script>

<style scoped>
.shaixuan_1 {
  /* border: 1px solid red; */
  margin-right: 200px;
  margin-top: 20px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  background-color: rgb(241, 241, 241);
}
.shaixuan_2 {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 200px;
  height: 100px;
}

#text {
  margin-top: 40px;
  margin-left: 20px;
  float: left;
}
#input {
  width: 200px;
  margin-top: 30px;
  float: left;
}
#date {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}
#button {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}
#shaixuan_1 {
  /* border: 1px solid red; */
  margin-right: 200px;
  margin-top: 20px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  background-color: rgb(241, 241, 241);
}
#all {
  margin-top: 40px;
  margin-left: 30px;
  float: left;
}
#delall {
  margin-top: 35px;
  margin-left: 30px;
  float: left;
}
#page {
  margin-top: 35px;
  margin-left: 150px;
  float: left;
}
</style>
